<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>非常炫酷逼真能跟鼠标互动的3D云特效</title>
		<meta charset="utf-8">
		<style type="text/css">

			body {
				background-color: #326696;
				margin: 0px;
				overflow: hidden;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				font-weight: bold;
				text-align:center;
			}

			a {
				color:#0078ff;
			}

            .error{
                color:red;
            }
		</style>





        <link rel="stylesheet" href="/login/css/font-awesome.min.css">
        <link rel="stylesheet" href="/login/css/style.css">



</head>
	<body>


    <form class="form-horizontal" action="/login.action" method="post" >

    <div class="materialContainer">
        <div class="box">
            <div class="title">登录</div>
        ${tip}
            <div class="input">
                <label for="hh">账号</label>
                <input type="text" name="id" id="hh">
                <span class="spin"></span>
                <span id="s_username" class="error"></span>
            </div>
            <div class="input">
                <label for="pass">密码</label>
                <input type="password" name="password" id="pass">
                <span class="spin"></span>
            </div>
            <div class="button login">
                <button>
                    <span>登录</span>

                </button>
            </div>
        </div>
    </form>









    <form action="/register.action" method="post" enctype="multipart/form-data">
        <div class="overbox">
            <div class="material-button alt-2">                 <#--material-button alt-2是那个加号按钮-->
                <span class="shape"></span>
            </div>
            <div class="title">注册</div>
            <div class="input">
                <label for="id">账号</label>
                <input type="text" name="id" id="id">
                <span class="spin"></span>

            </div>

            <div class="input">
                <label for="regpass">密码</label>
                <input type="password" name="password" id="regpass">
                <span class="spin"></span>
            </div>

            <div class="input">
                <label for="teacher">教师内推码</label>
              <input type="text" name="studentOrTeacher" id="teacher">
                <span class="spin"></span>
            </div>

            <div class="button">
                <button>
                    <span>注册</span>
                </button>
            </div>
        </div>

    </form>

    </div>









		<script type="text/javascript" src="/login/js/ThreeWebGL.js"></script>
		<script type="text/javascript" src="/login/js/ThreeExtras.js"></script>

		<script type="text/javascript" src="/login/js/Detector.js"></script>
		<script type="text/javascript" src="/login/js/RequestAnimationFrame.js"></script>

		<script id="vs" type="x-shader/x-vertex">
			varying vec2 vUv;
			void main() {

				vUv = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

			}
		</script>

		<script id="fs" type="x-shader/x-fragment">

			uniform sampler2D map;

			uniform vec3 fogColor;
			uniform float fogNear;
			uniform float fogFar;

			varying vec2 vUv;

			void main() {

				float depth = gl_FragCoord.z / gl_FragCoord.w;
				float fogFactor = smoothstep( fogNear, fogFar, depth );

				gl_FragColor = texture2D( map, vUv );
				gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
				gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );

			}

		</script>

		<script type="text/javascript">

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			// Bg gradient

			var canvas = document.createElement( 'canvas' );
			canvas.width = 32;
			canvas.height = window.innerHeight;

			var context = canvas.getContext( '2d' );

			var gradient = context.createLinearGradient( 0, 0, 0, canvas.height );
			gradient.addColorStop(0, "#1e4877");
			gradient.addColorStop(0.5, "#4584b4");

			context.fillStyle = gradient;
			context.fillRect(0, 0, canvas.width, canvas.height);

			document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')';

			// Clouds

			var container;
			var camera, scene, renderer, sky, mesh, geometry, material,
			i, h, color, colors = [], sprite, size, x, y, z;

			var mouseX = 0, mouseY = 0;
			var start_time = new Date().getTime();

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 3000 );
				camera.position.z = 6000;

				scene = new THREE.Scene();

				geometry = new THREE.Geometry();

				var texture = THREE.ImageUtils.loadTexture( '/login/images/cloud10.png' );
				texture.magFilter = THREE.LinearMipMapLinearFilter;
				texture.minFilter = THREE.LinearMipMapLinearFilter;

				var fog = new THREE.Fog( 0x4584b4, - 100, 3000 );

				material = new THREE.MeshShaderMaterial( {

					uniforms: {

						"map": { type: "t", value:2, texture: texture },
						"fogColor" : { type: "c", value: fog.color },
						"fogNear" : { type: "f", value: fog.near },
						"fogFar" : { type: "f", value: fog.far },

					},
					vertexShader: document.getElementById( 'vs' ).textContent,
					fragmentShader: document.getElementById( 'fs' ).textContent,
					depthTest: false

				} );

				var plane = new THREE.Mesh( new THREE.Plane( 64, 64 ) );

				for ( i = 0; i < 8000; i++ ) {

					plane.position.x = Math.random() * 1000 - 500;
					plane.position.y = - Math.random() * Math.random() * 200 - 15;
					plane.position.z = i;
					plane.rotation.z = Math.random() * Math.PI;
					plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;

					GeometryUtils.merge( geometry, plane );

				}

				mesh = new THREE.Mesh( geometry, material );
				scene.addObject( mesh );

				mesh = new THREE.Mesh( geometry, material );
				mesh.position.z = - 8000;
				scene.addObject( mesh );

				renderer = new THREE.WebGLRenderer( { antialias: false } );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onDocumentMouseMove( event ) {

				mouseX = ( event.clientX - windowHalfX ) * 0.25;
				mouseY = ( event.clientY - windowHalfY ) * 0.15;

			}

			function onWindowResize( event ) {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );
				render();

			}

			function render() {

				position = ( ( new Date().getTime() - start_time ) * 0.03 ) % 8000;

				camera.position.x += ( mouseX - camera.target.position.x ) * 0.01;
				camera.position.y += ( - mouseY - camera.target.position.y ) * 0.01;
				camera.position.z = - position + 8000;

				camera.target.position.x = camera.position.x;
				camera.target.position.y = camera.position.y;
				camera.target.position.z = camera.position.z - 1000;

				renderer.render( scene, camera );

			}

		</script>




    <script src="/login/js/jquery.min.js"></script>
    <script src="/login/js/index.js"></script>
	</body>
</html>
